import React, { useEffect, useCallback } from 'react';
import { enumMealType } from '../../../../enum'
import { putLsMealDishesInsertLsMealDishes, getLsMealDishesEcho, postLsMealDishesUpdateLsMealDishes } from '../../../../api';
import { Modal, Form, Input, Select, InputNumber, DatePicker, message } from 'antd'
import moment from 'moment';

/**
 * @description: 菜品维护添加菜品 - 弹窗
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-11-14） 添加菜品种类
 */

const { Option } = Select;

const AddMealTypeModule = ({ setAddMealTypeModuleShow, addMealTypeModuleShow, listFun, clickID, setClickID }) => {
    const [form] = Form.useForm()
    const { resetFields, validateFields, setFieldsValue } = form;
    const detailsFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getLsMealDishesEcho({ id: clickID });
                if (code === '20000') {
                    data.supplyDate = moment(data.supplyDate)
                    setFieldsValue(data)
                } else {
                    message.error(msg)
                }
            })()

        },
        [clickID, setFieldsValue],
    )
    useEffect(() => {
        if (clickID) {
            detailsFun()
        }

    }, [clickID, detailsFun])
    const handleOk = () => {
        validateFields().then(values => {
            values.supplyDate = moment(values.supplyDate).format(['YYYY-MM-DD'])
            if (clickID) {
                values.id = clickID;
                ; (async () => {
                    const { code, msg } = await postLsMealDishesUpdateLsMealDishes(values)
                    if (code === '20000') {
                        message.success('编辑成功！')
                        resetFields()
                        listFun()
                        setAddMealTypeModuleShow(false);
                        setClickID(undefined)
                    } else {
                        message.error(msg)
                    }
                })()
            } else {
                ; (async () => {
                    const { code, msg } = await putLsMealDishesInsertLsMealDishes(values)
                    if (code === '20000') {
                        message.success('添加成功！')
                        resetFields()
                        listFun()
                        setAddMealTypeModuleShow(false);
                    } else {
                        message.error(msg)
                    }
                })()
            }


        })

    };

    const handleCancel = () => {
        resetFields();
        setClickID(undefined)
        setAddMealTypeModuleShow(false);
    };

    return <Modal title="添加菜品" visible={addMealTypeModuleShow} onOk={handleOk} onCancel={handleCancel}>
        <Form
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            form={form}
        >
            <Form.Item
                label="菜品名称"
                name="dishes"
                rules={[{ required: true, message: '请输入菜品名称' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="菜品类型"
                name="mealType"
                rules={[{ required: true, message: '请选择菜品类型' }]}
            >

                <Select style={{ width: 120 }}>
                    {
                        enumMealType.map(item => <Option value={item.value} key={item.value}>{item.label}</Option>)
                    }
                </Select>

            </Form.Item>
            <Form.Item
                label="总数量"
                name="inventory"
            >
                <InputNumber />
            </Form.Item>

            <Form.Item
                label="单价（元）"
                name="price"
                rules={[{ required: true, message: '请输入菜品单价' }]}
            >

                <InputNumber />
            </Form.Item>
            <Form.Item
                label="供应日期"
                placeholder="请选择供应日期"
                name="supplyDate"
                rules={[{ required: true, message: '请选择供应日期！' }]}
            >
                <DatePicker />
            </Form.Item>
        </Form>
    </Modal>
}
export default AddMealTypeModule;